{% extends "base.html" %}

{% block title %}Search{% endblock %}

{% block content %}
<script type="text/javascript">
$(function() {
	tips = $("#validateTips");
});

jQuery(document).ready(function() {
	var title = $("#title"), desc = $("#desc"), picture = $("#picture"), allFields = $( []).add(
			title).add(desc).add(picture);
	init();

	$("#dialog")
			.dialog(
					{
						bgiframe : true,
						autoOpen : false,
						width : 400,
						height : 400,
						modal : true,
						buttons : {
							'OK' : function() {
								var bValid = true;
								allFields.removeClass('ui-state-error');

								bValid = bValid
										&& checkLength(title, "title", 1,
												50);
								bValid = bValid
									&& checkLength(desc, "desc", 1, 100);

								// From jquery.validate.js (by joern),
								// contributed by Scott Gonzalez:
								// http://projects.scottsplayground.com/email_address_validation/
								//bValid = bValid
									//	&& checkRegexp(
										//		desc,
											//	/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,
											//"eg. ui@jquery.com");

								if (bValid) {
									$("#form-create-serie").submit();
									$(this).dialog('close');
								}
							},
							Cancel : function() {
								$(this).dialog('close');
							}
						},
						close : function() {
							allFields.val('').removeClass('ui-state-error');
						}
					});

	$("#view-serie")
			.dialog(
					{
					bgiframe : true,
					autoOpen : false,
					width : 400,
					height : 400,
					modal : true,
					buttons : {
						'OK' : function() {
							$(this).dialog('close');
						}
					}
				});
});

</script>
<h2>Search series</h2>
    
    <form action="/search" method="post">
		<fieldset>
			<div><label for="name">Starts with:</label>
			<input type="text" name="name" class="text ui-widget-content ui-corner-all"></input> <button class="ui-button ui-state-default ui-corner-all search">Search</button></div>
		</fieldset>
    </form>
	
    {% if admin %}
    <div id="dialog" title="Create new serie">
		<p id="validateTips">All form fields are required.</p>
	
    	<form id="form-create-serie" action="/createSerie" enctype="multipart/form-data" method="post">
		<fieldset>
			<label for="title">Title</label>
			<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
			<label for="desc">Description</label>
			<textarea name="desc" id="desc" value="" class="text ui-widget-content ui-corner-all" cols="65" rows="4"></textarea>
			<input type="hidden" id="genre" name="genre" value="ahBzYW1wbGUtcHl0aG9uYXBwcgsLEgVHZW5yZRgBDA"></input>
			<label for="picture">Picture</label>
			<input type="file" name="picture" id="picture" value="" class="text ui-widget-content ui-corner-all" />
		</fieldset>
		</form>
	</div>
	
	<p>
	<span id="toolbar">
    	<button id="create-serie" class="ui-button ui-state-default ui-corner-all add" onclick="createSerie(); return false;">Create new serie</button>
<!--    	<a href="/createSerie" class="action">Create serie</a>-->
	{% if series %}
    	<button class="ui-button ui-state-default ui-corner-all remove" onclick="confirm('dropSelected'); return false;" >Remove selected</button>
<!--    	<a href="#" onclick="return false;" class="action">Remove selected</a>-->
    {% endif %}
    </span>
    </p>
    {% else %}
	{% if series %}
	<p>
	<span id="toolbar">
    	<button class="ui-button ui-state-default ui-corner-all add" onclick="addSelected();return false;" >Add selected</button>
<!--    	<a href="#" onclick="addSelected(); return false;" class="action">Add selected</a>-->
    </span>
    </p>
	{% endif %}
	{% endif %}
    
	{% if series %}
    <div id="feedback" class="ui-widget" style="display:none;">
		<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 0.7em;"> 
			<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
			<span id="feedback-message"></span>
			</p>
		</div>
	</div>
    <div id="error" class="ui-widget" style="display:none;">
		<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
			<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
			<span id="error-message"></span></p>
		</div>
	</div>
	
    <div id="view-serie" title="View serie">
    <table>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </div>
	
  	<table class="series" cellpadding="4" cellspacing="0" border="0">
		<thead>
		  <tr>
		    <th style="display:none"></th>
		    <th></th>
		    <th>Title</th>
		    <th>Genre</th>
		    <th>Description</th>
<!--		    <th>Actions</th>-->
		  </tr>
		</thead>
		<tbody id="selectable">
    {% for serie in series %}
	        <tr class="ui-state-default">
	        	<td style="display:none">{{ serie.key }}</td>
		        <td><div class="bubbleInfo"><img class="trigger" alt="{{ serie.title }} image" src="/thumbnail/{{ serie.key }}" />
		        <div class="popup">
		        <span><button class="ui-button ui-state-default ui-corner-all short-view" onclick="viewSerie('{{ serie.key }}'); return false;" >View</button>
		        <button class="ui-button ui-state-default ui-corner-all short-add" onclick="addSerie('{{ serie.key }}'); return false;" >Add</button></span>
		        </div></div></td>
		        <td>{{ serie.title }}</td>
		        <td>{{ serie.genre.name }}</td>
		        <td>{{ serie.desc }}</td>
<!--		        <td>-->
		        {% if admin %}
<!--		        <a href="/dropSerie?key={{ serie.key }}" class="action">remove</a>-->
		        {% else %}
<!--		        <a href="/addSerie?key={{ serie.key }}" class="action">add</a>-->
		        {% endif %}
<!--		        </td>-->
	        </tr>
    {% endfor %}
        </tbody>
    </table>
    
	{% endif %}
     <br/>
{% endblock %}
